<template>
    <div>
        <h1>{{ msg }}</h1>
        <h1>翻转后的字符串：{{ msg.split("").reverse().join("") }}</h1>
        <h1>翻转后的字符串（方法）：{{ revMsg() }}</h1>
        <h1>翻转后的字符串（方法）：{{ revMsg() }}</h1>
        <h1>翻转后的字符串（方法）：{{ revMsg() }}</h1>
        <h1>翻转后的字符串（计算属性）：{{ revMsgPlus }}</h1>
        <h1>翻转后的字符串（计算属性）：{{ revMsgPlus }}</h1>
        <h1>翻转后的字符串（计算属性）：{{ revMsgPlus }}</h1>
    </div>
    </template>
    
    <script>
    import {ref,computed} from "vue"
    export default {
      name: 'Reverse',
      components: {
      },
      setup(){
        const msg=ref("hello vue.js")
        // const revMsg = function () {
        //   return msg.value.split("").reverse().join("")
            
        // }
        
        const revMsg = () => {
            console.log("方法触发")
            return msg.value.split("").reverse().join("")
        }
        const revMsgPlus = computed(() => {
            console.log("计算属性触发")
            return msg.value.split("").reverse().join("")
        })
        return {
            msg,
            revMsg,
            revMsgPlus
        }
      }
    }
    </script>
    
    <style>
    
    
    </style>